<script setup lang="ts">
import Write from './components/Write.vue'
import { ContentDetailWrap } from '@/components/ContentDetailWrap'
import { ref, unref } from 'vue'
import { useI18n } from '@/hooks/web/useI18n'
import { useRouter } from 'vue-router'
import { saveCategoryApi } from '@/api/category'
import { useEventBus } from '@/hooks/event/useEventBus'
import { ElMessage } from 'element-plus'

const { emit } = useEventBus()

const { push, go } = useRouter()

const { t } = useI18n()

const writeRef = ref<ComponentRef<typeof Write>>()

const loading = ref(false)

const save = async () => {
  const write = unref(writeRef)
  const formData = await write?.submit()
  if (formData) {
    loading.value = true
    saveCategoryApi(formData)
      .then((res) => {
        console.log(res)
        if (res.code != 200) {
          ElMessage.error(res.message)
        } else {
          ElMessage.success({
            duration: 1000,
            message: res.message,
            onClose: () => {
              emit('getList', 'add')
              push('/article/category')
            }
          })
        }
      })
      .catch((err) => {
        console.log(err)
        ElMessage.error(err)
      })
  }
}
</script>

<template>
  <ContentDetailWrap :title="t('baseDesc.add')" @back="push('/article/category')">
    <Write ref="writeRef" />
    <template #header>
      <BaseButton @click="go(-1)">
        {{ t('common.back') }}
      </BaseButton>
      <BaseButton type="primary" :loading="loading" @click="save"
        >{{ t('baseDesc.save') }}
      </BaseButton>
    </template>
  </ContentDetailWrap>
</template>
@/hooks/event/useEventBus
